<template>
	<div class="Historical-comparison" v-if="setItem">
	 	<table>
	 		<thead><tr><th colspan="99">数据对比</th></tr></thead>
	 		<tr>
	 			<td class="report-echarts">
					<div ref="INSTANCE" style="width: 100%; height: 550px; overflow: auto"></div>
	 			</td>
	 		</tr>
	 	</table>
	 </div>
</template>

<script setup lang="ts">
	import {ref,watch,nextTick,onMounted,onUnmounted} from 'vue';
	// import * as echarts from "echarts";
	// import {TitleComponent,ToolboxComponent,TooltipComponent,GridComponent,LegendComponent,MarkLineComponent,MarkPointComponent} from "echarts/components";
	// import { LineChart } from 'echarts/charts';
	// import {use} from "echarts/core";
	// use([TitleComponent,ToolboxComponent,TooltipComponent,GridComponent,LegendComponent,MarkLineComponent,MarkPointComponent,LineChart]);
	
	const INSTANCE = ref();
	const EACHARTSPROPS = defineProps({
		ecahrtData: {
		  type: Object,
		  default() {
		    return {};
		  }
		},
		setItem: {
			type: Boolean,
			default(){
				return true;
			}
		}
	});
	
	const screenWidth=ref(document.body.clientWidth);
	let timer = ref(undefined);
	let optionhistory = {
		  tooltip: {
		  	trigger: "axis",
		  	confine: false,
		  },
		  legend: {
		  	left: 0,
		  	top: 0,
		  	bottom: 5,
		  },
		  grid: {
		  	left: 10,
		  	bottom: 50,
		  	containLabel: true,
		  },
		  xAxis: {
		  	type: "category",
		  	boundaryGap: false,
		  	splitLine: {
		  		show: true,
		  		lineStyle: {
		  			color: ["#07B2A1"],
		  		},
		  	},
		  	axisLine: {
		  		lineStyle: {
		  			color: ["#07B2A1"],
		  		},
		  	},
		  	data: [],
		  },
		  yAxis: {
		  	type: "value",
		  	splitLine: {
		  		show: true,
		  		lineStyle: {
		  			color: ["#07B2A1"],
		  		},
		  	},
		  },
		  series: [],
	};
	
	//随机生成颜色
	function Color() {
		let r = Math.floor(Math.random() * 255);
		let g = Math.floor(Math.random() * 255);
		let b = Math.floor(Math.random() * 255);
		let color = "rgba(" + r + "," + g + "," + b + ",0.8)";
		return color;
	}
	//随机生成图标形状
	function cricle() {
		let arr = ["none","circle","rect","roundRect","triangle","diamond","pin","arrow"];
		let i = Math.floor(Math.random() * 6 + 1);
		return arr[i];
	}
	
	//设置series
	const setSeries=(list)=>{
		let obj4 = [];
		list.forEach((item) => {
			let color = Color();
			let symbol = cricle();
			obj4.push({
				name: item.name,
				type: "line",
				data: [item.score],
				lineStyle: {
					color: color,
					width: 5,
					type: "dashed",
				},
				symbol: [symbol],
				itemStyle: {
					borderWidth: 10,
					borderColor: color,
					color: color,
				},
			});
		});
		list.forEach((item) => {
			obj4.forEach((itm) => {
				if (item.name == itm.name) {
					itm.data = item.childer;
				}
			});
		});
		obj4.forEach((item) => {
			if (item.name == "base_scores") {
				item.name = "总分";
			}
		});
		return obj4;
	};
	
	//处理合成
	const processSynthesis=(obj2)=>{
		let obj3 = {};
		obj2.forEach((item) => {
			let {name,score} = item;
			if (!obj3[name]) {
				obj3[name] = {name,childer: []};
			}
			obj3[name].childer.push(score);
		});
		// let list = 
		return Object.values(obj3);
	};
	
	//生成数据包
	const generatePackets=()=>{
		let z = 1;
		let obj2 = [];
		let scores = [];
		for (let i in EACHARTSPROPS.ecahrtData) {
			optionhistory.xAxis.data.push(`第${z++}次`);
			for (let key in EACHARTSPROPS.ecahrtData[i]) {
				obj2.push({
					name: key,
					score: EACHARTSPROPS.ecahrtData[i][key]
				});
				scores.push(EACHARTSPROPS.ecahrtData[i][key]);
			}
		}
		return {obj2,scores};
	};
	//处理数据
	const setData=()=>{
		// const myChart = echarts.init(INSTANCE.value);
		// optionhistory.xAxis.data = [];
		// const obj=generatePackets();
		// const list=processSynthesis(obj.obj2);
		// const obj4=setSeries(list);
		// optionhistory.series = setSeries(list);
		// let max = Math.max(...obj.scores);
		// nextTick(() => {
		// 	console.log(myChart);
		// 	myChart.setOption(optionhistory);
		// });
	};
	watch(()=>EACHARTSPROPS.ecahrtData,()=>{
		if (JSON.stringify(EACHARTSPROPS.ecahrtData) == "{}") return;
		setData();
	});
	
	watch(()=>screenWidth.value,()=>{
		if(!timer.value){
			timer.value=true;
			setTimeout(function(){
				INSTANCE.value.resize();
			    timer.value = false;
			},400);
		}
	});
	
	// onMounted(()=>{
	// 	window.onresize = () => {
	// 	    return (() => {
	// 	        window.screenWidth = document.body.clientWidth;
	// 	        screenWidth.value = window.screenWidth;
	// 	    })();
	// 	};
	// });
	
	onUnmounted(()=>{
		clearInterval(timer.value);
		timer.value=undefined;
	});
	
</script>

<style lang="less" scoped>
	table {
		width: 100%;
		border-collapse: collapse;

		tr,th,td {
			border: 2px solid #1abb73;
		}

		th,td {
			padding: 10px 0;
			// text-align: center;
		}

		thead {
			tr {
				&:first-child {
					font-size: 16px;
					font-weight: bold;
					color: #1abb73;
					text-align: center;
					padding: 10px 0;
				}
			}
		}

		.header-td {
			background: rgba(26, 187, 115, 0.2);
			text-align: center;
		}

		.contentd {
			font-size: 16px;
			font-weight: bold;
		}
	}

	.Historical-comparison {
		margin-bottom: 20px;

		.report-echarts {
			height: 550px;

			img {
				width: 100%;
			}
		}
	}
</style>
